<template>
  <div class="login-wrap">
    <div style="margin-top: -130px">
      <img src="@/assets/images/login-name.png"/>
      <div class="login-box">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            @keydown.enter="loginHandle"
        >
          <el-form-item label="" prop="username">
            <el-input class="user" v-model="ruleForm.username" @input="changeUser" placeholder="请输入您的用户名"/>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input class="pwd" type="password" v-model="ruleForm.password" placeholder="请输入您的密码"/>
          </el-form-item>
          <div class="pwd-box">
            <el-checkbox v-model="rememberPwd" label="记住密码"/>
            <!--<div @click="forgetHandle" class="forget-pwd">忘记密码</div>-->
          </div>
        </el-form>
        <!--        <div class="login-btn-box">
                  <div class="login-btn" @click="loginHandle">登 录</div>
                  <div class="login-btn" @click="registerHandle">注 册</div>
                </div>-->
        <div class="login-btn" @click="loginHandle">登 录</div>
      </div>
    </div>

    <register-user ref="registerRef"></register-user>
    <forget-user ref="forgetUser"></forget-user>
  </div>
</template>

<script>
import {passwordEncryption} from "../../util/index.js";
import {getPublicKey, login} from "../../router/api.js";
import RegisterUser from "./modules/registerUser.vue";
import ForgetUser from "./modules/forgetUser.vue";

export default {
  name: "index",
  components: {ForgetUser, RegisterUser},
  data() {
    return {
      ruleForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入您的用户名', trigger: 'blur'},
        ],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      },
      rememberPwd: false,
    }
  },
  methods: {
    async loginHandle() {
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (valid) {
          let resKey = await getPublicKey({username: encodeURIComponent(this.ruleForm.username)});
          if (resKey.status != 200) {
            // this.$message.warning('获取公钥失败');
            return;
          }

          let encryptedPassword = passwordEncryption(this.ruleForm.password, resKey.data);
          let res = await login({
            username: this.ruleForm.username,
            password: encryptedPassword
          })
          if (res.data.code != 200) {
            this.$message.warning(res.data.msg);
            return;
          } else {
            localStorage.setItem('loginToken', res.data.data.token);
            localStorage.setItem('userName', this.ruleForm.username);
            let _userList = localStorage.getItem('userList');
            if (this.rememberPwd) {
              let userList = [];
              if (_userList) {
                userList = JSON.parse(_userList)
              }
              userList.push({username: this.ruleForm.username, password: this.ruleForm.password})
              localStorage.setItem('userList', JSON.stringify(userList));
            } else {
              if(_userList){
                let arr = JSON.parse(_userList);
                let i = arr.findIndex(opt => opt.username == this.ruleForm.username);
                if (i > -1) {
                  arr.splice(i, 1)
                  localStorage.setItem('userList', JSON.stringify(arr));
                }
              }
            }

            this.$store.commit('SET_USERINFO', res.data.data);
            this.$router.push('/');
          }
        }
      })
    },
    changeUser() {
      let _userList = localStorage.getItem('userList');
      if(!_userList) return;
      let userList = JSON.parse(_userList);
      let val = userList.find(opt => opt.username == this.ruleForm.username);
      if (val) {
        this.ruleForm.password = val.password;
        this.rememberPwd = true;
      } else {
        this.ruleForm.password = '';
        this.rememberPwd = false;
      }

    },
    forgetHandle() {
      this.$refs.forgetUser.show();
    },
    registerHandle() {
      this.$refs.registerRef.show()
    }
  }
}
</script>

<style scoped lang="scss">
.login-wrap {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/login-bg.png") no-repeat left top;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  .login-box {
    width: 550px;
    height: 390px;
    background: url("@/assets/images/login-box.png") no-repeat left top;
    background-size: 100% 100%;
    position: relative;

    .el-form {
      padding: 150px 50px 0;

      .el-form-item {
        margin-bottom: 34px;

        &:nth-child(2) {
          margin-bottom: 20px;
        }
      }
    }

    .user, .pwd {
      position: relative;

      &:before {
        content: '';
        width: 20px;
        height: 20px;
        background: url("@/assets/images/img-icon2.svg") no-repeat left top;
        background-size: 100% 100%;
        position: absolute;
        left: 10px;
        top: 2px;
        z-index: 5;
      }

      :deep(.el-input__wrapper) {
        background-color: transparent;
        box-shadow: none;
        border-bottom: 1px solid #E9EDF5;

        .el-input__inner {
          padding-left: 30px;
          font-size: 18px;
          font-weight: 400;
          color: #336666;
        }
      }
    }

    .pwd {
      &:before {
        content: '';
        background: url("@/assets/images/img-icon1.svg") no-repeat left top;
        background-size: 100% 100%;
      }
    }

    .pwd-box {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 400;
      color: #4962F3;

      .forget-pwd {
        cursor: pointer;
      }
    }

    .login-btn {
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
    }

    /*.login-btn-box{
      width: 100%;
      position: absolute;
      bottom: 8px;
      overflow: hidden;
    }
    .login-btn{
      width: 50%;
      float: left;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
    }*/
  }
}
</style>
